<!-- 列表页分类 -->
<template>
  <div class="header_list">
    <el-row style="margin-top: 5px; margin-bottom: 5px;">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <ul class="detail_header clearfix">
            <li>
              <nuxt-link :to="{name: 'index'}">首页</nuxt-link>
              <span>></span>
            </li>
            <li>
              实验中心
            </li>
            <li v-if="zhuanye_">
              <el-tag closable @close="changeZhuanye({optionName: ''})">{{ zhuanye_ }}</el-tag>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <div class="search-position">
            <search-input :search-key="searchKey" :search-text="searchText" @search="handleSearch" />
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="subject-box" :class="{hide: !zhuanye_}">
      <div class="sort-item subject01-item clearfix"><span class="sort-title">专业大类</span>
        <div id="subject01" class="open" style="height: 30px;">
          <ul class="clearfix">
            <li data="all" class="" @click="changeZhuanye({optionName: ''})">全部</li>
            <li v-for="(item, index) in classList.zhuanye" :key="index" :class="{on: zhuanye_ == item.optionName}" :data="item.optionValue" @click="changeZhuanye(item)">{{ item.optionName }}</li>
          </ul>
        </div><a href="javascript:;" class="toggle-btn" @click="toggleOpen"><span>展开</span><span class="arrow-down" /></a>
      </div>
      <div class="sort-item subject02-item clearfix hide" style="display: block;">
        <span class="sort-title">专业分类</span>
        <div id="subject02" class="type">
          <ul class="clearfix">
            <li data="all" class="on">全部</li>
            <li data="611" data-num="1" data-title="理论与应用力学">理论与应用力学（1）</li>
            <li data="612" data-num="27" data-title="工程力学">工程力学（27）</li>
          </ul>
        </div>
      </div>
      <div class="sort-item subject03-item clearfix hide"><span class="sort-title">专业</span>
        <div id="subject03" class="classify" />
      </div>
    </div>
    <div id="subjectBox" class="sort-item clearfix all-subject" :class="{hide: zhuanye_ && zhuanye_.length >= 0}">
      <div class="subject-left">
        <p class="sub-title" data-id="1"><i class="iconfont gongxue">&nbsp;&nbsp;&nbsp;&nbsp;</i>工学(<span>1607</span>)</p>
        <ul class="col-3">
          <li data="577">力学类</li>
          <li data="579">材料类</li>
          <li data="585">海洋工程类</li>
          <li data="1">机械类</li>
          <li data="224">兵器类</li>
          <li data="86">航空航天类</li>
          <li data="578">仪器类</li>
          <li data="82">能源动力类</li>
          <li data="4">交通运输类</li>
        </ul>
        <ul class="col-3">
          <li data="223">矿业类</li>
          <li data="84">测绘类</li>
          <li data="83">土木类</li>
          <li data="227">建筑类</li>
          <li data="85">地质类</li>
          <li data="582">水利类</li>
        </ul>
        <ul class="col-3">
          <li data="222">电气类</li>
          <li data="580">自动化类</li>
          <li data="225">农业工程类</li>
          <li data="2">电子信息类</li>
          <li data="581">计算机类</li>
          <li data="226">林业工程类</li>
          <li data="589">公安技术类</li>
        </ul>
        <ul class="col-3 no-m-b">
          <li data="583">纺织类</li>
          <li data="588">生物工程类</li>
          <li data="87">环境科学与工程类</li>
          <li data="584">轻工类</li>
          <li data="3">化工与制药类</li>
          <li data="88">食品科学与工程类</li>
          <li data="5">核工程类</li>
          <li data="586">生物医学工程类</li>
          <li data="587">安全科学与工程类</li>
        </ul>
      </div>
      <div class="subject-right">
        <div class="subject-right-top">
          <p class="sub-title" data-id="2"><i class="iconfont lixue">&nbsp;&nbsp;&nbsp;&nbsp;</i>理学(<span>454</span>)</p>
          <ul class="col-5">
            <li data="571">天文学类</li>
            <li data="80">化学类</li>
            <li data="573">大气科学类</li>
            <li data="575">地球物理学类</li>
            <li data="576">地质学类</li>
            <li data="221">物理学类</li>
            <li data="572">地理科学类</li>
            <li data="574">海洋科学类</li>
            <li data="0">生物科学类</li>
            <li data="81">心理学类</li>
          </ul>
        </div>
        <div class="subject-right-float">
          <p class="sub-title" data-id="3"><i class="iconfont jingjixue">&nbsp;&nbsp;&nbsp;&nbsp;</i>经济学(<span>99</span>)</p>
          <ul>
            <li data="697">经济类</li>
          </ul>
        </div>
        <div class="subject-right-float">
          <p class="sub-title" data-id="45"><i class="iconfont faxue">&nbsp;&nbsp;&nbsp;&nbsp;</i>法学(<span>82</span>)</p>
          <ul class="col-2">
            <li data="217">法学类</li>
            <li data="218">马克思主义理论类</li>
          </ul>
        </div>
        <div class="subject-right-float">
          <p class="sub-title" data-id="5"><i class="iconfont jiaoyuxue">&nbsp;&nbsp;&nbsp;&nbsp;</i>教育学(<span>66</span>)</p>
          <ul class="col-2">
            <li data="94">教育学类</li>
            <li data="219">体育学类</li>
          </ul>
        </div>
        <div class="subject-right-float">
          <p class="sub-title" data-id="6"><i class="iconfont wenxue">&nbsp;&nbsp;&nbsp;&nbsp;</i>文学(<span>103</span>)</p>
          <ul>
            <li data="95">文学类</li>
          </ul>
        </div>
        <div class="subject-right-float">
          <p class="sub-title" data-id="7"><i class="iconfont lishixue">&nbsp;&nbsp;&nbsp;&nbsp;</i>历史学(<span>20</span>)</p>
          <ul>
            <li data="220">历史学类</li>
          </ul>
        </div>
        <div class="subject-right-float">
          <p class="sub-title" data-id="8"><i class="iconfont yishuxue">&nbsp;&nbsp;&nbsp;&nbsp;</i>艺术学(<span>187</span>)</p>
          <ul>
            <li data="233">艺术学类</li>
          </ul>
        </div>
        <div class="subject-right-float">
          <p class="sub-title" data-id="9"><i class="iconfont yixue">&nbsp;&nbsp;&nbsp;&nbsp;</i>医学(<span>503</span>)</p>
          <ul class="col-3 no-m-b">
            <li data="91">基础医学类</li>
            <li data="93">护理学类</li>
            <li data="92">中医类</li>
            <li data="6">临床医学类</li>
            <li data="230">法医学类</li>
            <li data="7">药学类</li>
            <li data="231">医学技术类</li>
            <li data="229" style="width:66.66%;">公共卫生与预防医学类</li>
          </ul>
        </div>
        <div class="subject-right-float">
          <p class="sub-title" data-id="10"><i class="iconfont nongxue">&nbsp;&nbsp;&nbsp;&nbsp;</i>农学(<span>156</span>)</p>
          <ul class="col-2 no-m-b">
            <li data="90">动物类</li>
            <li data="228">自然保护与环境生态类</li>
            <li data="89">植物类</li>
          </ul>
        </div>
        <div class="subject-right-float">
          <p class="sub-title" data-id="11"><i class="iconfont guanlixue">&nbsp;&nbsp;&nbsp;&nbsp;</i>管理学(<span>247</span>)</p>
          <ul class="no-m-b">
            <li data="232">管理类</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="sort-item sort-item-search clearfix ">
      <div class="sort-box">
        <p class="sort-title">课程级别</p>
        <div class="proLevel">
          <ul class="clearfix">
            <li data="all" :class="{on: !kechengjibie_ || kechengjibie_ == ''}" @click="changeKechengjibie({ optionName: '' })">全部</li>
            <li data="1" :class="{on: kechengjibie_ == '国家一流课程'}" @click="changeKechengjibie({ optionName: '国家一流课程' })">国家一流课程</li>
            <li data="2" :class="{on: kechengjibie_ == '省一流课程'}" @click="changeKechengjibie({ optionName: '省一流课程' })">省级一流课程</li>
            <li data="3" :class="{on: kechengjibie_ == '学校课程'}" @click="changeKechengjibie({ optionName: '学校课程' })">学校课程</li>
          </ul>
        </div>
      </div>
      <div class="sort-box">
        <p class="sort-title">课程类型</p>
        <div class="courseAttr">
          <ul class="clearfix">
            <li data="all" :class="{on: !kechengleixing_ || kechengleixing_ == '' }" @click="changeKechengleixing({ optionName: '' })">全部</li>
            <li data="1" :class="{on: kechengleixing_ == '公共课' }" @click="changeKechengleixing({ optionName: '公共课' })">公共课</li>
            <li data="2" :class="{on: kechengleixing_ == '专业基础课' }" @click="changeKechengleixing({ optionName: '专业基础课' })">专业基础课</li>
            <li data="3" :class="{on: kechengleixing_ == '专业核心课' }" @click="changeKechengleixing({ optionName: '专业核心课' })">专业核心课</li>
            <li data="8" :class="{on: kechengleixing_ == '其他' }" @click="changeKechengleixing({ optionName: '其他' })">其他</li>
          </ul>
        </div>
      </div>
      <div class="sort-box">
        <p class="sort-title">实验类型</p>
        <div class="expType">
          <ul class="clearfix">
            <li data="all" :class="{on: !shiyanleixing_ || shiyanleixing_ == ''}" @click="changeShiyanleixing({optionName: ''})">全部</li>
            <li data="1" :class="{on: shiyanleixing_ == '基础练习型'}" @click="changeShiyanleixing({optionName: '基础练习型'})">基础练习型</li>
            <li data="2" :class="{on: shiyanleixing_ == '综合设计型'}" @click="changeShiyanleixing({optionName: '综合设计型'})">综合设计型</li>
            <li data="3" :class="{on: shiyanleixing_ == '研究探索型'}" @click="changeShiyanleixing({optionName: '研究探索型'})">研究探索型</li>
            <li data="4" :class="{on: shiyanleixing_ == '其他'}" @click="changeShiyanleixing({optionName: '其他'})">其他</li>
          </ul>
        </div>
      </div>
      <div class="sort-box" style="display: none"><label class="langType">中英双语类<input type="checkbox" name="isZhAndEn"></label></div>
    </div>
    <el-row v-if="false">
      <el-col :span="2">
        <ul class="content_ul clearfix">
          <li><a href="javascript:">所属专业</a></li>
        </ul>
      </el-col>
      <el-col :span="12">
        <template v-for="(group, gindex) in zhuanyeGroup">
          <ul v-if="group == '工学' || group == '理学' || group == '医学' || group == '农学'" :key="gindex" class="content_ul clearfix">
            <li style="font-weight: 700;"><a href="javascript:">{{ group }}</a></li>
            <template v-for="(item, index) in classList.zhuanye">
              <li v-if="group == item.optionGroup" :key="index" :class="{now: zhuanye_ == item.optionName}" @click="changeZhuanye(item)"><a href="javascript:">{{ item.optionName }}</a></li>
            </template>
          </ul>
        </template>
      </el-col>
      <el-col :span="10">
        <template v-for="(group, gindex) in zhuanyeGroup">
          <ul v-if="group != '工学' && group != '理学' && group != '医学' && group != '农学'" :key="gindex" class="content_ul clearfix" style="width: 100%">
            <li style="font-weight: 700; min-width: 54px"><a href="javascript:">{{ group }}</a></li>
            <template v-for="(item, index) in classList.zhuanye">
              <li v-if="group == item.optionGroup" :key="index" :class="{now: zhuanye_ == item.optionName}" @click="changeZhuanye(item)"><a href="javascript:">{{ item.optionName }}</a></li>
            </template>
          </ul>
        </template>
      </el-col>
    </el-row>
    <el-row v-if="false">
      <el-col :span="2">
        <ul class="content_ul clearfix">
          <li><a href="javascript:">课程级别</a></li>
        </ul>
      </el-col>
      <el-col :span="22">
        <ul class="content_ul clearfix">
          <li :class="{now: kechengjibie_ == '' }" @click="changeKechengjibie({ optionName: '' })"><a href="javascript:">全部</a></li>
          <li v-for="(item, index) in classList.kechengjibie" :key="index" :class="{now: kechengjibie_ == item.optionName}" @click="changeKechengjibie(item, kechengjibie)"><a href="javascript:">{{ item.optionName }}</a></li>
        </ul>
      </el-col>
    </el-row>
    <el-row v-if="false">
      <el-col :span="2">
        <ul class="content_ul clearfix">
          <li><a href="javascript:">课程类型</a></li>
        </ul>
      </el-col>
      <el-col :span="22">
        <ul class="content_ul clearfix">
          <li :class="{now: kechengleixing_ == '' }" @click="changeKechengleixing({ optionName: '' })"><a href="javascript:">全部</a></li>
          <li v-for="(item, index) in classList.kechengleixing" :key="index" :class="{now: kechengleixing_ == item.optionName}" @click="changeKechengleixing(item, kechengleixing)"><a href="javascript:">{{ item.optionName }}</a></li>
        </ul>
      </el-col>
    </el-row>
    <el-row v-if="false">
      <el-col :span="2">
        <ul class="content_ul clearfix">
          <li><a href="javascript:">实验类型</a></li>
        </ul>
      </el-col>
      <el-col :span="22">
        <ul class="content_ul clearfix">
          <li :class="{now: shiyanleixing_ == '' }" @click="changeShiyanleixing({ optionName: '' })"><a href="javascript:">全部</a></li>
          <li v-for="(item, index) in classList.shiyanleixing" :key="index" :class="{now: shiyanleixing_ == item.optionName}" @click="changeShiyanleixing(item, kechengleixing)"><a href="javascript:">{{ item.optionName }}</a></li>
        </ul>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import SearchInput from '@/components/common/SearchInput'
import '@/assets/css/common.css'
import '@/assets/css/list-page-v2.css'
export default {
  components: {
    SearchInput
  },
  props: {
    classList: {
      type: Object,
      default() {
        return {
          zhuanye: [],
          kechengjibie: [],
          kechengleixing: [],
          shiyanleixing: []
        }
      }
    },
    zhuanye: {
      type: String,
      default() {
        return ''
      }
    },
    kechengjibie: {
      type: String,
      default() {
        return ''
      }
    },
    kechengleixing: {
      type: String,
      default() {
        return ''
      }
    },
    shiyanleixing: {
      type: String,
      default() {
        return ''
      }
    },
    searchKey: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      categoryId: '',
      categoryOneId: '',
      categoryTwoId: '',
      categoryThreeId: '',
      courseName: '',
      isFree: -1,
      twoList: [],
      threeList: [],
      zhuanye_: '',
      kechengjibie_: '',
      kechengleixing_: '',
      shiyanleixing_: '',
      tags: []
    }
  },
  computed: {
    zhuanyeGroup() {
      const arr = []
      for (var i = 0; i < this.classList.zhuanye.length; i++) {
        arr.push(this.classList.zhuanye[i].optionGroup)
      }
      return [...new Set(arr)]
    },
    searchText() {
      return this.zhuanye_ ? '本专业搜索' : ' 搜索'
    }
  },
  mounted() {
    // this.categoryId = this.currentId
    this.zhuanye_ = this.zhuanye
    this.tags.push({ name: this.zhuanye_, type: '' })
    this.kechengjibie_ = this.kechengjibie
    this.kechengleixing_ = this.kechengleixing
    this.shiyanleixing_ = this.shiyanleixing
    const that_ = this
    // 绑定事件
    const zhuanyeDom = document.getElementById('subjectBox')
    const lis = zhuanyeDom.querySelectorAll('li')
    for (var i = 0; i < lis.length - 1; i++) {
      const li = lis[i]
      /*
      li.onclick = function(e) {
        alert(2)
        debugger
        that_.zhuanye_ = li.innerText
        that_.goList()
      }
      */
      li.addEventListener('click', function(e) {
        that_.zhuanye_ = li.innerText
        that_.goList()
      })
    }
  },
  methods: {
    changeZhuanye(data) {
      this.zhuanye_ = data.optionName
      this.goList()
    },
    changeKechengjibie(data) {
      this.kechengjibie_ = data.optionName
      this.goList()
    },
    changeKechengleixing(data) {
      this.kechengleixing_ = data.optionName
      this.goList()
    },
    changeShiyanleixing(data) {
      this.shiyanleixing_ = data.optionName
      this.goList()
    },
    handleSearch(mingcheng) {
      this.mingcheng = mingcheng
      this.goList()
    },
    goList() {
      const zhuanye = this.zhuanye_
      const kechengjibie = this.kechengjibie_
      const kechengleixing = this.kechengleixing_
      const shiyanleixing = this.shiyanleixing_
      const mingcheng = this.mingcheng
      const p = {
        path: this.$route.path,
        query: {
          zhuanye,
          kechengjibie,
          kechengleixing,
          shiyanleixing,
          mingcheng
        }
      }
      if (!zhuanye) {
        delete p.query.zhuanye
      }
      if (!kechengjibie) {
        delete p.query.kechengjibie
      }
      if (!kechengleixing) {
        delete p.query.kechengleixing
      }
      if (!shiyanleixing) {
        delete p.query.shiyanleixing
      }
      if (!mingcheng) {
        delete p.query.mingcheng
      }
      // if (this.courseType === 'course') {
      this.$router.push(p)
      // }
    },
    toggleOpen(event) {
      const parent = event.currentTarget
      const clazz = parent.querySelectorAll('span')[1].getAttribute('class')
      if (clazz === 'arrow-down') {
        parent.querySelectorAll('span')[0].innerText = '收起'
        parent.querySelectorAll('span')[1].className = 'arrow-up'
        parent.previousElementSibling.style.height = 'auto'
      }
      if (clazz === 'arrow-up') {
        parent.querySelectorAll('span')[0].innerText = '展开'
        parent.querySelectorAll('span')[1].className = 'arrow-down'
        parent.previousElementSibling.style.height = '30px'
      }
    }
  }
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.header_list {
  position: relative;
  margin: 0 auto;
  width: 1200px;
  /* border-top: 1px solid rgb(215, 215, 215); */
  /* background: #f6f8fb; */

  .list_content {
    margin: 0 auto;
    /* height: 73px; */
    /* border-bottom: 1px solid rgb(215, 215, 215); */
    position: relative;

    &:last-child {
      border-bottom: none;
    }

    span {
      position: absolute;
      display: inline-block;
      font-size: 14px;
      font-weight: bold;
      height: 26px;
      line-height: 26px;
      top: 23px;
    }
  }
}

.content_ul {
  display: inline-block;
  // margin-left: 60px;
  margin-top: 23px;

  li {
    float: left;
    font-size: 14px;
    height: 26px;
    line-height: 26px;
    padding: 0 6px;
    border-radius: 6px;
    margin: 0 6px;

    a:hover {
      color: #4269c9;
      text-decoration: none;
    }

    &.now {
      background: rgba(32,128,247,.1);

      a {
        color: #2080f7;
      }
    }
  }
}

.detail_header {
  li {
    float: left;
    line-height: 57px;
    margin: 0 0;
    margin-left: 10px;
    color: #999;
    font-size: 14px;

    span {
      margin-left: 10px;
      margin-right: 10px;
    }

    a {
      color: #999;

      &:hover {
        text-decoration: none;
      }
    }
  }
}

.search-position {
  display: flex;
  /* justify-content: center; */
  align-items: center;
  height: 57px;
  float: right;
}

.arrow-up {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 1px solid #4269c9;
  border-right: 1px solid #4269c9;
  transform: rotate(135deg);
  position: absolute;
  right: -15px;
  top: 30%;
}

.arrow-down {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 1px solid #4269c9;
  border-right: 1px solid #4269c9;
  transform: rotate(315deg);
  position: absolute;
  right: -15px;
  top: 45%;
}
</style>
